let fu = document.querySelector(".fu");
let sanjiao = document.querySelector(".sanjiao")
let wd = document.querySelector(".wd");
let hd = document.querySelector(".hd-n1")
let hd_5 = document.querySelector(".hd-n5");
let img1 = document.querySelector(".img1")
hd.addEventListener("mouseover", function() {
    wd.style.display = "block";

    hd.style.backgroundColor = "#fff"

})
hd.addEventListener("mouseout", function() {
    wd.style.display = "none";
    hd.style.backgroundColor = "#f2f2f2"
})
hd_5.addEventListener("mouseover", function() {
    img1.style.display = "block"
})
hd_5.addEventListener("mouseout", function() {
    img1.style.display = "none"
});
let you_1 = document.querySelector(".you-1");
let liA = you_1.querySelectorAll("li");
let you_div1 = document.querySelector(".you-div1");
for (let i = 0; i < liA.length; i++) {

    liA[i].onmouseover = function() {
        for (let i = 0; i < liA.length; i++) {
            liA[i].className = "";

        }
        if (liA[1]) {
            you_div1.style.display = "block";
        }


        this.className = "bgc ";
    }
    liA[i].onmouseout = function() {
        if (liA[1]) {

            you_div1.style.display = "none";
        }


        this.className = "";
    }
};
let you_2_3 = document.querySelector(".you-2-3")
window.onscroll = function() {
    you_2_3.addEventListener("click", function() {
        document.documentElement.scrollTop = document.scrollTop = 0;
    })
}
class Slide {
    constructor() {


        this.lun = document.querySelector(".lun");
        this.pictureUl = this.lun.querySelector("ul");
        this.pictureLis = this.pictureUl.children;
        this.dot = document.querySelector(".dot");
        this.aLi = this.dot.children;
        this.len = this.pictureLis.length;
        this.i = 0;
        this.timer = null;
        this.aOpen();
        this.clearAndOpen();
    }
    move() {
        this.i++;
        if (this.i == this.len) {
            this.i = 0;
        }
        if (this.i == -1) {
            this.i = this.len;
        }
        if (this.oDots) {
            for (let j = 0; j < this.oDots.length; j++) {
                this.oDots[j].className = "";
            }
            this.oDots[this.i].className = "bg";
        }
        for (let j = 0; j < this.len; j++) {
            this.pictureLis[j].style.opacity = 0;
        }
        startMove(this.pictureLis[this.i], {
            opacity: 100,
        });

    }
    aOpen() {
        this.timer = setInterval(() => {
            this.move();
        }, 2000);
    }
    addLi() {
        let str = "";
        for (let k = 0; k < this.len; k++) {
            str += `
          <li></li>
          `;
            this.dot.innerHTML = str;
        }
        this.oDots = this.dot.children;

        this.oDots[0].className = "bg";
        for (let j = 0; j < this.oDots.length; j++) {
            this.oDots[j].addEventListener("click", () => {
                this.i = j - 1;
                this.move();
            });
        }
    }
    clearAndOpen() {
        this.lun.onmouseover = () => {
            clearInterval(this.timer);
        };
        this.lun.onmouseout = () => {
            this.timer = setInterval(() => {
                this.move();
            }, 2000);
        };
    }
}
let slide = new Slide();
slide.addLi();
slide.clearAndOpen();
// slide.addBtn();

class Slides {
    constructor() {


        this.lun = document.querySelector(".slunbo");
        this.pictureUl = this.lun.querySelector("ul");
        this.pictureLis = this.pictureUl.children;
        this.len = this.pictureLis.length;
        this.i = 0;
        this.timer = null;
        this.aOpen();
        this.clearAndOpen();
    }
    move() {
        this.i++;
        if (this.i == this.len) {
            this.i = 0;
        }
        if (this.i == -1) {
            this.i = this.len;
        }
        for (let j = 0; j < this.len; j++) {
            this.pictureLis[j].style.opacity = 0;
        }
        startMove(this.pictureLis[this.i], {
            opacity: 100,
        });

    }
    aOpen() {
        this.timer = setInterval(() => {
            this.move();
        }, 2000);
    }

    clearAndOpen() {
        this.lun.onmouseover = () => {
            clearInterval(this.timer);
        };
        this.lun.onmouseout = () => {
            this.timer = setInterval(() => {
                this.move();
            }, 2000);
        };
    }
}
let slides = new Slides();

slides.clearAndOpen();

class Slidess {
    constructor() {


        this.lun = document.querySelector(".tub-ce2");
        this.pictureUl = this.lun.querySelector("ul");
        this.pictureLis = this.pictureUl.children;
        this.len = this.pictureLis.length;
        this.i = 0;
        this.timer = null;
        this.aOpen();
        this.clearAndOpen();
    }
    move() {
        this.i++;
        if (this.i == this.len) {
            this.i = 0;
        }
        if (this.i == -1) {
            this.i = this.len;
        }
        for (let j = 0; j < this.len; j++) {
            this.pictureLis[j].style.opacity = 0;
        }
        startMove(this.pictureLis[this.i], {
            opacity: 100,
        });

    }
    aOpen() {
        this.timer = setInterval(() => {
            this.move();
        }, 2000);
    }

    clearAndOpen() {
        this.lun.onmouseover = () => {
            clearInterval(this.timer);
        };
        this.lun.onmouseout = () => {
            this.timer = setInterval(() => {
                this.move();
            }, 2000);
        };
    }
}
let slidess = new Slidess();

slidess.clearAndOpen();

class Slidesss {
    constructor() {


        this.lun = document.querySelector(".tub-ce3");
        this.pictureUl = this.lun.querySelector("ul");
        this.pictureLis = this.pictureUl.children;
        this.len = this.pictureLis.length;
        this.i = 0;
        this.timer = null;
        this.aOpen();
        this.clearAndOpen();
    }
    move() {
        this.i++;
        if (this.i == this.len) {
            this.i = 0;
        }
        if (this.i == -1) {
            this.i = this.len;
        }
        for (let j = 0; j < this.len; j++) {
            this.pictureLis[j].style.opacity = 0;
        }
        startMove(this.pictureLis[this.i], {
            opacity: 100,
        });

    }
    aOpen() {
        this.timer = setInterval(() => {
            this.move();
        }, 2000);
    }

    clearAndOpen() {
        this.lun.onmouseover = () => {
            clearInterval(this.timer);
        };
        this.lun.onmouseout = () => {
            this.timer = setInterval(() => {
                this.move();
            }, 2000);
        };
    }
}
let slidesss = new Slidesss();

slidess.clearAndOpen();

class Slidessss {
    constructor() {


        this.lun = document.querySelector(".baijiu-box");
        this.pictureUl = this.lun.querySelector("ul");
        this.pictureLis = this.pictureUl.children;
        this.len = this.pictureLis.length;
        this.i = 0;
        this.timer = null;
        this.aOpen();
        this.clearAndOpen();
    }
    move() {
        this.i++;
        if (this.i == this.len) {
            this.i = 0;
        }
        if (this.i == -1) {
            this.i = this.len;
        }
        for (let j = 0; j < this.len; j++) {
            this.pictureLis[j].style.opacity = 0;
        }
        startMove(this.pictureLis[this.i], {
            opacity: 100,
        });

    }
    aOpen() {
        this.timer = setInterval(() => {
            this.move();
        }, 2000);
    }

    clearAndOpen() {
        this.lun.onmouseover = () => {
            clearInterval(this.timer);
        };
        this.lun.onmouseout = () => {
            this.timer = setInterval(() => {
                this.move();
            }, 2000);
        };
    }
}
let slidessss = new Slidessss();

slidessss.clearAndOpen();
let navList = document.querySelector(".navList");
let liS = navList.querySelectorAll("li");
for (var i = 0; i < liS.length; i++) {

    liS[i].addEventListener("mouseenter", function() {
        for (var i = 0; i < liS.length; i++) {
            liS[i].className = "";
        }
        this.className = "bg11";


    })
};
let liB = document.querySelectorAll(".catItem");
let boxD = document.querySelectorAll(".menuBox1");

for (var i = 0; i < liB.length; i++) {
    liB[i].setAttribute("index", i);
    liB[i].addEventListener("mouseenter", function() {
        for (var i = 0; i < liB.length; i++) {
            liB[i].className = "";
            liB[i].addEventListener("mouseleave", function() {
                var index = this.getAttribute("index");

                boxD[index].style.display = "none";
            })
        }
        this.className = "";

        var index = this.getAttribute("index");

        for (var k = 0; k < boxD.length; k++) {
            boxD[k].style.display = "none";
        }
        boxD[index].style.display = "block";
    });
}
let nva1 = document.querySelector(".nva1");

let boxTub = document.querySelector("boxTub");
let tab = document.querySelector("#tab");
let lis = tab.querySelectorAll("li");
let main = document.querySelector("main");
let aDiv = document.querySelectorAll(".boxTub-box");
for (var i = 0; i < lis.length; i++) {
    lis[i].setAttribute("index", i);
    lis[i].addEventListener("mousemove", function() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
        }
        this.className = "bgac";
        var index = this.getAttribute("index");
        for (var k = 0; k < aDiv.length; k++) {
            aDiv[k].style.display = "none";
        }
        aDiv[index].style.display = "block";

    });
}

$(() => {
    // console.log($(".headerLogin"), $(".headerReg"));
    let data = JSON.parse(localStorage.getItem("username"))
    console.log(data);
    let uid = data.id
    $(".headerLogin").html(data.username)
    $(".headerReg").html("退出登录")
    $(".headerReg").on("click", function(e) {
        e.prevebtDefault
        localStorage.removeItem("username")
        location.href("shouye.html")
    })
    $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
        uid: data.id,
    }).then((res) => {
        console.log(res.data);

        /*  console.log($(".sse li")); */

        res.data.forEach((item, index) => {
            /*   console.log(res.data[index].pprice); */
            $(".sse li").eq(index).html(`
                                    <img src="${res.data[index].pimg}" alt="">
                                    <p>${res.data[index].pname}</p>
                                    <span>￥${res.data[index].pprice}</span>
                                    
                                    `)
            $(".sse li").eq(index).on("click", () => {
                location.href = "detail.html?" + res.data[index].pid
            })
        });

    });



    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart01.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "379",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart02.jpg",
    //     pname: "52° 剑南春",
    //     pprice: "379",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart03.jpg",
    //     pname: "52°酒鬼酒书说",
    //     pprice: "479",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart04.jpg",
    //     pname: "53°郎酒青花郎",
    //     pprice: "459",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart05.jpg",
    //     pname: "郎牌郎酒",
    //     pprice: "779",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart06.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "669",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart07.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "549",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart08.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "659",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart09.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "319",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart10.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "959",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart01.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "989",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart02.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "819",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart03.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "859",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart04.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "739",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart05.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "769",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart06.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "629",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart07.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "699",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart08.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "689",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart09.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "509",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });
    // $.get("http://jx.xuzhixiang.top/ap/api/goods/goods-add.php", {
    //     pimg: "imgs/cart01.jpg",
    //     pname: "45度小郎酒",
    //     pprice: "449",
    //     pdesc: "喝完飞天",
    //     uid: data.id,
    // }).then((res) => {
    //     console.log(res);
    // });

})


/* $(() => {
            if (localStorage.getItem("data")) {
                let data = JSON.parse(localStorage.getItem("data"))
                $(".headerLogin").html(data.username); //登录用户
                //调用商品接口
                $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
                    uid: data.id,
                }).then((res) => {
                    console.log(res);
                    // console.log($(".boxTub-box li"));
                    $.each($(".boxTub-box li"), function(index, value) {
                        console.log(value)
                        $(".boxTub-box li").eq(index).html(`
                    <img src="${data[index].pimg} "alt=" ">
                    <b>${data[index].pname}</b>
                    <span class=" ">${data[index].pprice}</span>
                    `)
                    })

                }); */
/* $(() => {
            if (localStorage.getItem("data")) {
                let data = JSON.parse(localStorage.getItem("data"))
                $(".headerLogin").html(data.username); //登录用户
                //调用商品接口
                $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
                    uid: data.id,
                }).then((res) => {
                    console.log(res);
                    // console.log($(".baijiu-box-2 li"));
                    $.each($("..baijiu-box-2 li"), function(index, value) {
                        console.log(value)
                        $(".boxTub-box li").eq(index).html(`
                    <img src="${data[index].pimg} "alt=" ">
                    <b>${data[index].pname}</b>
                    <span class=" ">${data[index].pprice}</span>
                    `)
                    })

                });
                */